<template>
	<view class="sign-page">
		{{list}}
		<view class="item yu-flex yu-between" v-for="(el,i) in list" :key="i" @click="tapItem(el)">
			<image :src="el.img ? $api.json('baseUrl') + el.img : '../../static/textbook.png'" mode="aspectFit" style="width: 150rpx;height: 150rpx;border-radius: 20rpx;"></image>
			<view class="yu-flex-1 yu-pl-20">
				<view class="yu-font-19 yu-color-3 yu-bold">{{el.lessionName}}</view>
				<view class="yu-color-9 textHeid-2 yu-pt-20" >课程简介：{{el.lessionInfo}}</view>
			</view>
		</view>
		<popup ref="popup" type="center" >
			<view class="pop">
				<!-- {{detial}} -->
				<view class="title">
					{{detial.lessionName}}
				</view>
				<view class="cards yu-flex">
					<view :class="['card', checked==i?'active':''] " @click="checkedCard(i)" v-for="(e,i) in cardList" :key="i">
						<view class="yu-font-19">{{e.name}}</view>
						<view class="yu-color-money">￥{{e.price}}</view>
					</view>
				</view>
				<button type="warn" size="default" :loading="false" plain @click="save(cardList[checked].name)">报名（{{cardList[checked].name}}）</button>
			</view>
		</popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				checked: 0,
				cardList:[
					{name:'月卡', price: '100'},
					{name:'季卡', price: '200'},
					{name:'年卡', price: '300'},
				],
				detial:{}
			};
		},
		onPullDownRefresh(){
			this.getData()
		},
		onLoad() {
			this.getData()
		},
		methods: {
			tapItem(val){
				this.detial = val
				console.log(123);
				// this.$refs.popup.open()
				uni.navigateTo({
					url: '/pages/joinClass/detail?id=' + val.id + '&name=' + val.lessionName
				})
1			},
			save(val){
				this.$api.msg('报名【'+val+'】成功')
				this.$refs.popup.close()
			},
			checkedCard(i){
				this.checked = i
			},
			getData() {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					method: 'POST',
					url: this.$api.json('baseUrl') + '/lession/findSignList', 
					data: {},
					success: (res) => {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh();
						if (res.data.resultCode==='000000') {
							this.list = res.data.data
						} else if(res.data.resultCode==='200009') {
							uni.redirectTo({
								url:'/pages/login/login'
							})
						} else {
							this.$api.msg(res.data.resultInfo||res.errMsg);
							setTimeout(()=>{uni.navigateBack()},1000)
							
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.sign-page {
		.item {
			padding: 20rpx;
			margin: 20rpx 10rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx #C8C7CC;
		}
		.title {
			font-size: 40rpx;
			padding: 20rpx;
			background: linear-gradient(-30deg, rgb(235, 235, 235), rgb(255, 236, 229));;
			border-radius: 20rpx;
			text-align: center;
		}
		.card {
			text-align: center;
			// border: 1px solid #aa0000;
			background: #FFFFFF;
			padding: 10rpx 20rpx;
			width: 100rpx;
			height: 150rpx;
			margin: 20rpx;
			border-radius: 20rpx;
		}
		.active{
			border: 1px solid red;
		}
	}
</style>
